<template>
  <div class="person">
    <tab :tabtitles="tabTitles" :current-page="3" @tab-change-end="pageMsg">
      <div class="tab-content-container">
        <around :transformAttr="trans"></around>
        <section class="info">
          <div class="info-l">
            <p>度</p>
            <p>{{one}}</p>
            <p>今日发电</p>
          </div>
          <div class="info-r">
            <div>
              <p class="t">今日天气</p>
              <p class="c">晴</p>
            </div>
            <div>
              <p class="t">日照时间</p>
              <p class="c">12h</p>
            </div>
            <div>
              <p class="t">当前功率</p>
              <p class="c">{{stationData.outputPower | noFloat}}w</p>
            </div>
          </div>
        </section>
        <div class="mt1" id="main1"></div>
      </div>
      <div class="tab-content-container">
        <around :transformAttr="trans"></around>
        <section class="info">
          <div class="info-l">
            <p>度</p>
            <p>{{ two }}</p>
            <p>本月发电</p>
          </div>
          <div class="info-r">
            <div>
              <p class="t">月有效发电</p>
              <p class="c">{{ stationData.powerOnDay  | noFloat}}小时</p>
            </div>
            <div>
              <p class="t">总发电量</p>
              <p class="c">{{ stationData.powerMonth  | noFloat}}度</p>
            </div>
          </div>
        </section>
        <div class="mt1" id="main2"></div>
      </div>
      <div class="tab-content-container">
        <around :transformAttr="trans"></around>
        <section class="info">
          <div class="info-l">
            <p>度</p>
            <p>{{ three }}</p>
            <p>今年发电</p>
          </div>
          <div class="info-r">
            <div>
              <p class="t">年有效发电</p>
              <p class="c">{{ stationData.yearPowerEff  | noFloat}}小时</p>
            </div>
            <div>
              <p class="t">总发电量</p>
              <p class="c">{{ stationData.yearPower | noFloat }}度</p>
            </div>
          </div>
        </section>
        <div class="mt1" id="main3"></div>
      </div>
    </tab>
  </div>
</template>

<script>
  import {overview , overview2} from '../../service/getData'
  import {getCookie, setCookie, clearCookie , timeToDEG} from '../../config/mUtils'
  import Tab from '../../components/common/vue-tab';
  import Around from '../../components/common/around';
  import echarts from 'echarts';
  import { Toast } from 'mint-ui';

  export default {
    data(){
      return{
        tabTitles:['日','月','年'],
        trans:'',
        chart: null,
        serverData: [],
        xData:[],
        id:0,
        stationData:{},
        chartType:0,
        chartTitle:'',
        timer:null,
        one:0,
        two:0,
        three:0
      }
    },
    filters:{
      noFloat:function (val) {
        return parseInt(val).toFixed(0);
      }
    },
    mounted(){
      this.id = this.$route.query.id;
      this.getData();
      setTimeout(() => {
        this.trans = 'transform: rotate('+timeToDEG(1) * 180+'deg);  -ms-transform: rotate('+timeToDEG(1) * 180+'deg);  -moz-transform: rotate('+timeToDEG(1) * 180+'deg);  -webkit-transform: rotate('+timeToDEG(1) * 180+'deg);  -o-transform: rotate('+timeToDEG(1) * 180+'deg);';
      },200);
      setTimeout(() => {
        this.$nextTick(function() {
          this.getChartData(0);
        })
        this.changeNum('one' , this.stationData.dayPower)
      },500);
    },
    watch:{

    }
    ,
    components:{
      Tab,
      Around
    },

    computed:{

    },

    methods:{
      async getData(){
        let email = getCookie('email');
        if(email && email.length > 0){
          let res = await overview(email , this.id);
          if(res.success){
            this.stationData = res.results;
          }
        }else{
          this.$router.push({name:'login'})
        }
      },
      pageMsg(val){
        if(val && parseInt(val) > 0){
          switch (val){
            case 1:
              this.chartType = 0;
              this.getChartData(parseInt(val) - 1);
              this.changeNum('one' , this.stationData.dayPower);
              this.trans = 'transform: rotate('+timeToDEG(val) * 180+'deg);  -ms-transform: rotate('+timeToDEG(val) * 180+'deg);  -moz-transform: rotate('+timeToDEG(val) * 180+'deg);  -webkit-transform: rotate('+timeToDEG(val) * 180+'deg);  -o-transform: rotate('+timeToDEG(val) * 180+'deg);';
              break;
            case 2:
              this.chartType = 1;
              this.getChartData(parseInt(val) - 1);
              this.changeNum('two' , this.stationData.powerMonth);
              this.trans = 'transform: rotate('+timeToDEG(val) * 180+'deg);  -ms-transform: rotate('+timeToDEG(val) * 180+'deg);  -moz-transform: rotate('+timeToDEG(val) * 180+'deg);  -webkit-transform: rotate('+timeToDEG(val) * 180+'deg);  -o-transform: rotate('+timeToDEG(val) * 180+'deg);';
              break;
            case 3:
              this.chartType = 2;
              this.getChartData(parseInt(val) - 1);
              this.changeNum('three' , this.stationData.yearPower);
              this.trans = 'transform: rotate('+timeToDEG(val) * 180+'deg);  -ms-transform: rotate('+timeToDEG(val) * 180+'deg);  -moz-transform: rotate('+timeToDEG(val) * 180+'deg);  -webkit-transform: rotate('+timeToDEG(val) * 180+'deg);  -o-transform: rotate('+timeToDEG(val) * 180+'deg);';
              break;
          }
        }
      },
      drawGraph(id) {
        // 绘图方法
        this.chart = echarts.init(document.getElementById(id));
        this.chart.showLoading()
        let that = this;
        if(parseInt(this.chartType) > 0){
          that.chart.setOption({
            color : [ '#FE9540' ],
            title : {
              text: this.chartTitle,
              subtext: '数据来自乐伏',
              x: 'center',
              show:false
            },
            grid : {
              left : '1%',
              right : '1%',
              bottom : '1%',
              containLabel : true
            },
            calculable:true,
            tooltip : {
              trigger: 'axis',
              formatter: function(params) {
                return params[0].name + '<br/>'
                  + params[0].seriesName + ' : ' + parseInt(params[0].value).toFixed(2) + '';
              }
            },
            xAxis : [
              {
                type : 'category',
                data : this.xData
              }
            ],
            yAxis : [
              {
                type : 'value'
              }
            ],
            series : [
              {
                name:'发电量',
                type:'bar',
                barMaxWidth:30,
                data:this.serverData
              }
            ]
          })
        }else{
          that.chart.setOption({
            color : [ '#FE9540' ],
            title : {
              text: this.chartTitle,
              subtext: '数据来自乐伏',
              x: 'center',
              show:false
            },
            grid : {
              left : '1%',
              right : '1%',
              bottom : '1%',
              containLabel : true
            },
            tooltip : {
              trigger: 'axis',
              formatter: function(params) {
                return params[0].name + '<br/>'
                  + params[0].seriesName + ' : ' + params[0].value + '';
              }
            },
            /*toolbox: {
              show : false,
              feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
              }
            },
            dataZoom : {
              show : false,
              realtime : true,
              start : 0,
              end : 100
            },*/
            xAxis : [
              {
                type : 'category',
                boundaryGap : false,
                axisLine: {onZero: true},
                data : this.xData,
                axisLabel:{interval:11}
              }
            ],
            yAxis : [
              {
                name : '发电量',
                type : 'value',
                /*max : 500*/
              }
            ],
            series : [
              {
                name:'发电量',
                type:'line',
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data:this.serverData
              }
            ]
          })
        }
        this.chart.hideLoading()
      }
      ,
      reDraw(index){
        if(this.chart != null){
          this.chart.dispose();
        }
        this.drawGraph('main'+index);
      },
      async getChartData(type){
        let email = getCookie('email');
        if(email && email.length > 0){
          let res = await overview2(email , this.id , type , 2);
          if(res.success){
            this.serverData = [];
            this.xData = [];
            if(parseInt(type) > 0){
              for(let i = 0 ; i < res.powerList.length ; i ++){
                res.powerList[i] = res.powerList[i] ? res.powerList[i] : 0
              }
              this.serverData = res.powerList;
              if(this.serverData.length < 1){
                Toast('当前统计图暂无数据');
              }
              this.xData = res.timeList;
            }else{
              for(let i = 0 ; i < res.results.length ; i ++){
                this.serverData.push(res.results[i][1] ? res.results[i][1] : 0)
                this.xData.push(res.results[i][0])
              }
              if(this.serverData.length < 1){
                Toast('当前统计图暂无数据');
              }
            }
            this.chartTitle = res.name;
            this.reDraw(parseInt(type) + 1);
          }
        }else{
          this.$router.push({name:'login'})
        }
      }
      ,
      changeNum(key , max){
        if(parseInt(max) > 0){
          let a = 0;
          let b = 0;
          if(parseInt(max) > 1000){
            a = 1000;
            b = 85;
          }else{
            a = ((parseInt(max).toFixed(0))/2).toFixed(0);
            b = 15;
          }
          this[key] = parseInt(max) - a;
          this.timer = setInterval(() => {
            if(parseInt(this[key]) > parseInt(max)){
              this[key] = max.toFixed(0);
              window.clearInterval(this.timer)
            }else{
              this[key] = this[key] + b;
            }
          },35);
        }
      }
    }
  }

</script>

<style lang="less" scoped>
  .person{
    background-color: #F4F4F4;
    width: 100%;
    height: 100%;
    padding: 3rem .8rem 0 .8rem;
    font-family: 'Microsoft YaHei', arial, sans-serif, 'Droid Sans Fallback';
    .cover{
      width: 100%;
      height: 100%;
      background-color: #e6e6e6;
      .chartBox{
        min-height: 15rem;
        top: 2rem;
        width: 15rem;
        margin: 0 auto;
      }
      .cm{
        bottom: 1rem;
        position: absolute;
        width: 100%;
        button{
          width: 85%;
          margin: 0 auto;
        }
      }
    }
  }
  .info{
    display: flex;
    .info-l{
      flex:2;
      p{
        margin-bottom: .1rem;
        color: #394658;
      }
      p:first-child{
        text-align: right;
        font-size: .5rem;
        padding: 0 1rem;
      }
      p:nth-child(2){
        font-size: 2.8rem;
        text-align: center;
        line-height: 3.5rem;
        font-weight: 500;
        font-family: Arial, Helvetica, sans-serif;
      }
      p:last-child{
        text-align: center;
        line-height: 1.6rem;
      }
    }
    .info-r{
      flex:1;
      div{
        p{
          margin-bottom: .1rem;
          color: #394658;
        }
        .t{
          font-size: .5rem;
        }
        .c{
          letter-spacing: .06rem;
          font-weight: 600;
          font-size: .75rem;
        }
      }
    }
  }
  .mt1{
    min-height: 8rem;
    width: 100%;
  }
</style>
